Matt
Brown Dreamweaver Community
Manager Macromedia
Creating a page with Macromedia Dreamweaver MX
is easy. Creating a site is easy. Everyone has
access to tools that make authoring HTML pages
easy. The trick is no longer getting the page
built. It's getting it built right, and then
getting it looked atagain and again.
You'll find a lot of advice already exists on
the web about graphics and layout design to help
you get your page looked at. But to get your site
looked at again and again (as in actually "used")
means your site needs to look good and be, well,
usable. It's a little harder to find good advice
about the convergence of design and usability,
which I think is the most important angle to site
design. Let me share with you what I consider to
be some of the top design-usability
tips.
(By the way, a lot of these tips have appeared on other
lists put together by design/usability pundits that I admire.
If I have restated one of their tips, I've credited them. At
the end of the article, you'll find a list
of my favorite pundit resources, so you can explore their
good advice yourself.)
Get to know your audience and design for themnot
for yourself or your colleagues You are a
professional. You work with design every day; you work on the
web every day. Your colleagues probably do the same. You read
the source code on the pages you browse to figure out how the
authors of those pages did things and to see if the page
authors wrote their own JavaScript. You are part of the
technology elite.
But, guess what. People who visit the web pages that you
create are NOT part of that elite. They are probably so much
less knowledgeable of the technologies that you are working
with that it is easy for you to forget how removed they are.
Most of the people who visit your web pages are people like my
motherboth in terms of the number of browsers that they are
familiar with and in terms of the dollars that they have
available to spend online. Remember that they get new browsers
when they upgrade computersnot when one company or another
decides to release an update. The people who visit your web
pages know may nothing about plug-ins or Java or anything
other than "www." In fact, they may not even what "www"
means.
If the majority of the people who are going to be buying
your client's products are like my mother, then you had better
reconcile yourself to the fact that they are the customers you
need to please.
There are a variety of ways you can get to know your
audience. One way is to use surveys. You or your client can
also pay for demographic information about your market.
Perhaps the best way to get to know your audience is to get
to know your audiencefirsthand. If you are selling bricks and
mortar on your website, then spend a morning in the parking
lot of a bricks and mortar store. Watch the store's customers
as they go in and out of the store. See what they are buying.
Do the same to see the customers of a service-oriented
business. Sit in the lobby of a doctor's office or in a
building with lawyers in it. Whatever the business, get to
know the customers.
Here are some demographic considerations to take into
account when identifying your target audience:
If you see that your customers are all middle aged or
older, think about type size. Make sure your text isn't
isn't too small or difficult to read.
If you have a primarily male audience, you have to think
about color-blindness. If you are working with women, you
don't have this concern.
If your audience is younger, maybe you should have less
text and more graphics (including Flash content).
If your audience is likely to spend money easily, put a
special offer on the front page of the site. If they are the
thrifty sort, make the special offer a reduced-price special
offer.
Even after you've considered the demographics and
propensities of your likely audience, put yourself in the
shoes of the business store clerk. Consider, for instance:
where you would put the "on sale" items? If you open your eyes
and get out of your technology-elite perspective, you might
find out something about your audience and it just might
surprise you.
How about an example of good design and great usability?
One site I like is Joann.com, which is a chain of fabric
stores. They have large type, easy navigation, and lots of
specials. When I go into the physical store, the customers are
predominately women who are 30 years old or older. Many of
them shop there to make things for their kids and grandkids.
Not that many of the customers are likely to be computer
literate. That's my impression, at least, derived from talking
to people while waiting in line. What I'm particicularly
impressed with is the way the Joann.com website has loads of
specials and features that tie in perfectly with their
physical stores. The customers in line at the checkout stand
talk about the website and how they check it weekly to see
what is on sale.
Test your site with inexperienced web
users Never overestimate the lowest level of users
who visit your site. Usability testing is one of the most
important things you can do when rolling out a new website.
When you have your site mocked up, test the design and the
flow of your navigation with someone who knows nothing about
the web. Don't look in your own circles. Reach out. Ask one of
the coffee-servers at Starbucks. Check with your mom. Ask a
local librarian. Check with the receptionist where you work.
Not all of these people are going to be representative of your
website's anticipated clients, but they will look at your site
with a set of eyes that are a lot fresher than yours.
Do not discount anything these not-so-web-savvy users say
or do. Don't just rely on them to tell you what was wrongbe
there when they access the site for the first time and watch
them as they browse around. Watch, especially, where they
hesitate. See what they look at. Listen to them talk to
themselves. In fact, urge them to talk out loud while you
watch. The feedback they offer as they natter along is very
useful.
Specifically focus on whether they identify with your basic
navigation of the site. For instance, let's assume you have a
clothing site and your navigation has an initial split between
men's and women's clothes. Pay attention to whether this
division makes sense to your first-time users. If you observe
them looking for trousers or blouses or shoes before they make
the men/women split, then you have made their experience one
click more frustrating than it needs to be.
Test early and test often. Fixing things at the beginning
of the design process will be five to ten times less
time-consuming than redesigning a website after
production.
Make the content on your first page rich and
explanatory The first page of your site should
provide as much of what the user is looking for on your site
as you can show. (This is one of Jacob Nielsen's
current points.) Don't show a company graphic all by itself or
an animated logo spinning around. What does your user care
about that? Your user comes to the site to get information,
right? So, give it to them.
On your first page, consider doing the following:
Create a very simple, easy-to-understand navigation
system that doesn't take up too much space.
Make sure your user has a way to search the site. (More
on that later.)
Make the title of the page explanatory. If your user
bookmarks the site (and you really want them to do this so
they come back often), the first 20 or so characters on the
page is what they will see in their favorites/bookmarks
menus. If you are the San Francisco branch of the Music
Store, entitle the page "Music Store - SF," not "Your one
stop shop for music past and present."
At the top of the first page, add a one sentence tag
line that summarizes what the user will find in the site.
This is not the mission statement of the company. It is
informative, short and sweet.
Add the first paragraph of the latest news story on the
company. Odds are that some of the site visitors are coming
to your site because they heard about a piece of news. Make
a link from this first paragraph to the section where the
company news would be kept.
Place titles and a synopsis with links to the full text
for each article that you think people want to read.
Provide a way of contacting the company on the first
page. Often, people come to the website just to get a phone
number. In fact, put the main phone number on each page.
Provide a way of contacting the company on the first
page. Often, people come to the website just to get a phone
number. In fact, put the main phone number on each page.
If you have a physical presence other than your website,
provide a store address or locator on the front page. Or,
put a link to either a store locator or a listing of all the
stores that people can search or sort through.
If you are selling directly from the web page (or if you
have an advertising circular), put some of the profiled
products on the front page. Don't just leave a link for
specials.
If you are selling a service, highlight some of those
services on the front page rather than making your user dig
for them.
Check out the Wolf Camera site for an outstanding example
of most of these points.
Archive content after redesigning or changing a
site The need for archiving is another one of Jacob Nielsen's
excellent tips. When users come to your site, they see the
things you present them. If you do a good job and you present
what site visitors are looking for, they may bookmark the
page, tell their friends about the site, or use that
information in some way. If you update your site and change
the content on the front page, the next time they come back,
they are not going to find what they were looking for.
However, if you provide a section of archived content (or a
link to an archived content page) people will find that
content easier.
In short, keep an archive and make sure that people can
find links to the archive from the places they would be
looking for the original information.
Include useful search terms in
meta tags and titles Meta tags help with indexing
and searching your site. There are two meta tags that you
certainly should be using: description and keywords.
Description is a short description of the site. Again, this
needs to be explanatory and it is not a marketing message.
When this comes up in a search engine, it is your chance to
tell the potential visitor what your site has to offer, not
how great you are.
Keywords are words that are offered to search engines to
help them display your page to people who are searching the
web. If you load those meta tags with information that is too
granular or too general or too obscure, people are not going
to find the page. Or, they will be overwhelmed with pages that
only partially match what they are looking for. Try asking a
dozen people who are both familiar and unfamiliar with the
site. When you tell them what your site has on it, ask them to
think out loud and free associate words and phrases. This is a
good basis for the meta tags on your pages.
Here's an example of some meta tags that might not help
much. If you are an auto body shop in San Jose, California,
your meta tags could look like:
body, shop, San Jose, California, car,
bondo, repair
Now, these keywords might be seem logical, but the problem
is that they would cause you to get as many hits from people
looking for porn as you would get for people looking for body
shops.
These keywords would be more specific and better situated
for your client:
auto body-shop, body shop, body shop San
Jose, auto repair
Use the right keywords and think about how people will
search for you.
Provide contact and copyright information on
every page Put your contact information on every
page. How many times have you used the web like a big phone
directory? I do it all the time and I know that a lot of other
people do too. If you are setup to talk directly to customers,
make sure you are making it easy for them to contact you.
There's another reason you might want to provide contact
information on every page. Sometimes people "deep link" to
pages existing in the lower nagivational levels in your
website. You may not like the practice, but you can't really
do too much to stop them. However, you can make sure that your
copyright and contact information are on each page. This way,
no matter how someone gets to your page, they can contact
you.
Set up your navigation system to help users
find what they are looking for Some sort of
navigation system is, obviously, essential to your site.
Sometimes it's comprised of fancy JavaScript rollovers.
Sometimes it's made up of Flash files. Sometimes it's just a
series of text links separated with a colon (":") character or
two. What is not so obvious is that whichever technology you
use to build the navigation system won't be worth squat if
people can't: a) find it or b) figure it out.
There is something to be said for the web convention for
text links. They are in text, they are blue, and they have an
underline. Even people who know virtually nothing about the
web usually know this. If you deviate from this convention for
any reason, you are going to have to somehow train the user to
click the right elements to get somewhere. Perhaps what to
click in the navigation system will be obvious, or perhaps
you'll have to spend time informing your visitors about the
convention you're using for links. In either case, it is a
usability cost: small in the former case and huge in the
latter.
If you decide that your navigation and links need to differ
visually from than the standards, take time early on to test
the interface. Test it with people who don't know a thing
about your site or the products you have on it.
One good resource for learning about navigation is Information Architecture for the World Wide
Web from O'Reilly. The authors are librarians and
they go into great detail aobut navigation techniques. They
even spend a good amount of time talking about which part of
speech to use to make your navigation consistent and
logical.
Provide search options Navigation
from the user interface (UI) is only one way people traverse a
site. The other major way of navigating (other than just
randomly browsing ) is to search the site. Search engines are
very complex these days. They allow a multitude of options and
the cost ranges from free services to very expensive. You can
even buy Google's search engine technology for your site
search engine. If you use Macromedia ColdFusion MX, you
already have access to the Verity
search engine.
You need to think about which engine you want to use and
factor that into the cost of building the site. But, whatever
the cost, you do want a search engine. How often have
you been to a site looking for a Marvin the Martian doll and
not been able to decide if it was under "Stuffed Animals" or
"Movie Characters"?
You'll get both kinds of users--those who search for
something on a site and those who look through a hierarchy of
topics for expected categories. Make them both
happy.
Maintain consistency of
design Don't let a site grow organically over time
and develop sections that have features and conventions that
are not applied to the rest of the site. This is a common
problem. Websites start small, mostly. They grow and new
features and conventions are added to help the user. But over
time, these additions constitute a whole new way to navigate
and interact with the site. If you have to work on one section
at a time, then at least keep a list of the new conventions
that you are adding. Then, as time allows add them to the
pages you authored previously.
Better yet, work with your team to collect all the new
features and agree on them as a team. Then, apply them to all
the sections of your site at the same time that you roll out
the new sections.
Think about noise,
movement, or anything that spins twice ... no, wait ... three
times Yes, I work for Macromedia and I do think
Macromedia Flash MX is cool. However, anything that doesn't
contribute directly to the understanding of the site or
doesn't impart information should be thought about long and
hard. If your user thinks she has to wait for unimportant
stuff to download to use your site, she is going to lose
patience and leave.
The worst offender here is the large introduction. Give the
user information and not fluff. You should never even be in
the situation where you should contemplate a "skip intro"
button.
On the other hand, if you use Macromedia Flash MX to create
a useful movie describing how to use a product, to illustrate
a technique, or to present dynamic data in a rich Internet
application, then you're on the right track. There are some
excellent examples of how to create Macromedia Flash MX
content that improve a site dramatically. Check out the Pet
Market application to see an excellent use of Macromedia
Flash MX.
The same caution goes for music, whistles, and beeps. No
one except designers and children really like things that pop
and whir and sputter when you click on them. They are a waste
of time for you to set up, they play unreliably across
browsers and platforms, and they don't really impart
information. If you are doing an audio tour on-line or
teaching a language, that is a different matter. But for
decoration, avoid sound.
Proofread the text on your
sites Simply put, misspellings and incorrect
grammar turn off your users. They cause your site to look as
though someone rushed it into production or make you look like
you don't care enough to do the job right. (I am a product of
Benedictine education and they certainly drummed that one
in.)
Provide printer-friendly
pages Web pages are great ways to get information
out to an almost unlimited number of people. If your
information is really so good and useful, it is likely users
will want to have it available even when they are not at the
computer. For years we have had it pounded into our heads that
the web requires us to break information down into
small-sized, readable chunks (which is true). But, now we need
to drum it back in our heads that the big, long,
easily-printed page has its place, too.
If you have information that users may want to print, think
about setting up a PDF file (which opens from a link). This
usually makes the printing process so much easier. At the
least, you can take the same content that has been spread out
over the smaller, linked pages and put all of it into one
large document. Then, give the users a link to that
consolidated document so they don't have to print out multiple
pages.
A great example is Webmonkey. Look for the print icon and text
link at the top left of the page. Click on the print icon and
see how it works.
Enhance your pagesdon't replace
them Jacqueline Hamilton is a new name to me. I
have a link to her site in the resources section below and it
is worth a look. This is her advice:
Enhance your pages, don't replace them. As
people visit your sites, they develop patterns in what they
look for and where they go. They bookmark the places that
they like, not the pages you think they should link to. If
you remove the pages on the URL, then you break the link the
customer may have to you.
If you do have to do a major site redesign, try to make
links that go to the same sections as the previous links would
have. If there are major changes, at least add a redirect from
the old pages to the new pages. That way, if someone has an
old URL, they won't get a broken link page when they come back
to your site.
Resources Now visit the
websites of some of my favorite design and usability pundits:
About the author Matt Brown is a
Community Manager for Macromedia and technical editor of more
than a dozen software books. Matt has taught courses at
Foothill College and San Francisco State's Multimedia Studies
Program and is a regular speaker at conferences and user
groups.
.gif){kind=tracking}
